<template>
  <div class="main-box">
    <div class="card content-box w-full">
      <TableContainer
        :is-page="true"
        :page-info="{ current: page, pageSize: pageSize, total: total }"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
        <template #searchCard>
          <api-search :search-event="handleSearchEvent" />
        </template>
        <template #btnLeft>
          <!--          <el-button v-auth="['api:add:btn']" type="primary" @click="handleAdd">-->
          <!--            <el-icon>-->
          <!--              <Plus />-->
          <!--            </el-icon>-->
          <!--            新增-->
          <!--          </el-button>-->
          <!--          <el-button v-auth="['api:add:btn']" @click="handleAdd">-->
          <!--            <el-icon>-->
          <!--              <Delete />-->
          <!--            </el-icon>-->
          <!--            删除-->
          <!--          </el-button>-->
          <el-button type="primary" v-auth="['role:synchronization:btn']" @click="handleSynchronousApi">
            <el-icon>
              <Compass />
            </el-icon>
            同步API
          </el-button>
          <el-button v-auth="['role:add:btn']">
            <el-icon>
              <Refresh />
            </el-icon>
            刷新缓存
          </el-button>
          <el-button v-auth="['role:add:btn']">
            <el-icon>
              <Document />
            </el-icon>
            查看文档
          </el-button>
        </template>
        <el-table
          v-bind="$attrs"
          :data="[...tableData]"
          row-key="id"
          :height="gridOptions.height"
          :show-overflow-tooltip="gridOptions.showOverflow"
        >
          <template #empty>
            <span>暂无数据</span>
          </template>
          <el-table-column
            v-for="item in gridOptions.columns"
            :type="item.type ? item.type : 'default'"
            v-bind="{ ...item, ...$attrs }"
            :key="item.prop"
          >
          </el-table-column>
        </el-table>
      </TableContainer>
    </div>
    <api-add></api-add>
    <api-synchronous ref="apiSynchronousRef" @close="send"></api-synchronous>
  </div>
</template>

<script lang="ts" setup>
import { ApiSearch, ApiAdd, ApiSynchronous } from "@/views/admin/api/components";

import { getApiList } from "@/api/modules/api";
import { Api } from "@/api/interface/api";
import { useTableConfig } from "@/hooks/useTable";
import TableContainer from "@/components/TableContainer/index.vue";
import { usePagination } from "alova/client";
import { HttpMethodCN } from "@/enums";

const queryForm = ref<Api.IApiParams>({});

const { gridOptions } = useTableConfig({
  columns: [
    {
      prop: "id",
      label: "ID",
      width: 100,
      align: "center"
    },
    {
      prop: "path",
      label: "API路径",
      minWidth: 200
    },
    {
      prop: "apiGroup",
      label: "API分组",
      minWidth: 200
    },
    {
      prop: "description",
      label: "API简介",
      minWidth: 200
    },
    {
      prop: "method",
      label: "请求方式",
      minWidth: 200,
      formatter: (row: Api.IApi) => {
        return row.method ? `${row.method}/${HttpMethodCN[row.method]}` : "";
      }
    }
  ],
  controlsWidth: 240,
  isCreateTime: false,
  isControls: false
});
const apiSynchronousRef = ref<InstanceType<typeof ApiSynchronous>>();
const {
  data: tableData,
  page,
  pageSize,
  total,
  send
} = usePagination(
  (page, pageSize) =>
    getApiList({
      current: page,
      size: pageSize,
      ...queryForm.value
    }),
  {
    force: true,
    total: response => response.data?.pager?.total || 0,
    data: response => response.data?.records ?? []
  }
);

const handleSearchEvent = (form: Api.IApiParams) => {
  queryForm.value = form;
  send();
};
const handleSizeChange = (size: number) => {
  pageSize.value = size;
  page.value = 1;
};
const handleCurrentChange = (current: number) => {
  page.value = current;
};

const handleSynchronousApi = () => {
  apiSynchronousRef.value?.open();
};
</script>
